#{extends 'main.html' /}
#{set title:'Home' /}
<script type="text/javascript">


</script>
<style type="text/css">
	#login {
		margin-top: 100px;
		border: 3 px solid #999999;
		background-color: #dddddd;
		width: 400px;
		height: 330px;
		
		font-size: 16px;
		border-radius: 8px 8px 8px 8px;
	}
	#login div.loginTitulo {
		background-color: #bbbbbb;
		font-weight: bold;
		color: blue;
		font-size: 30px;
		text-align: center;
		padding-top: 15px;
		padding-bottom: 15px;
		margin-bottom: 30px;
		   border-radius: 8px 8px 8px 8px;
	}
	#login div.loginCorpo {
		padding-left: 5px;
		padding-right: 5px;
		padding-top: 15px;
		padding-bottom: 15px;
		width: 200px;
	}
	div.campo {
		padding: 2px;
		
	}
	div.campo label {
		 color: blue;
    	display: block;
    	font-size: 20px;
	} 
	div.campo input {
		color: black;
		font-size: 25px;
		border: 1px solid black;
		width: 100%;
	}
	div.loginAcao {
		width: 200px;
		
	}
	div.loginAcao input[type='submit'] {
		width: 120px;
		font-size: 18px;
		text-align: center;
		height: 37px;
	}
	span.erroLogin {
		font-size:16px;
		font-weight: bold;
		color: red;
	}

</style>

<div class="login_base" style="width: 100%" align="center">
<div id="login" align="left">
	<div class="loginTitulo" align="center">
		<span>JTC - Autenticação </span>
	</div>
	<div>
	#{if mensagem != null}
		<span class="erroLogin">${mensagem}</span>
	#{/if}
	</div>
	
	
	<div align="center">
		<form action="@{Application.validarLogin()}" method="POST">
			<div class="loginCorpo" align="left">
				<div class="campo">
					<label>Nome de usuário:</label>
					<input type="text" name="loginNome">
				</div>	
				<div class="campo">
					<label>Senha:</label>
					<input type="password" name="loginSenha">
				</div>
			</div>
			<div class="loginAcao" align="right">
				<input type="submit" name="Enviar" value="Enviar">
			</div>
		</form>
	</div>
</div>

</div>